<template>
  <div class="icons">
        <swiper :options="swiperOption">
            <swiper-slide v-for="(page,index) in pages" :key="index">
                <div class="icon" v-for="category in page" :key="category.id">
                    <div class="icon-img">
                     <img class="img" :src="category.imgUrl">  
                    </div>
                    <span class="icon-desc">{{category.desc}}</span>
                </div>
            </swiper-slide>
        </swiper>
  </div>
</template>

<script>

export default {
  props:{
    IconList: Array
  },
  data() {
    return {
        swiperOption:{
          autoplay: false
        },
    };
  },
  computed:{
      pages(){
          let pages = [];
          this.IconList.forEach((item,index) => {
              const page = Math.floor(index / 8)
              if(!pages[page]){
                  pages[page] = []
              }
              pages[page].push(item)
          });
          return pages;
      }
  }
};
</script>

<style lang='stylus' scoped>
@import '~@/assets/styles/mixins.styl';
@import '~@/assets/styles/varibles.styl'


.icons >>>  .swiper-container
   height :0
   width :100%
   padding-bottom :50%
.icon
    position :relative
    overflow :hidden
    float :left
    width :25%
    padding-bottom :25% 
    // background-color :red
    .icon-img  
        position :absolute
        box-sizing :border-box
        top :0.2rem
        left :0
        right :0
        bottom :0.44rem
        // background-color :blue
        box-sizing border-box
        padding :0.03rem
        .img
            display :block
            margin :0 auto 
            height :100%
    .icon-desc
        position :absolute
        left :0
        right :0
        bottom :0
        height :.44rem
        line-height :.44rem
        text-align :center
        color :$darkText
        ellipsis()
</style>
